<template>
  <div class="flight-list">
    <el-row :gutter="20">
      <el-col :span="24" v-for="(category, index) in categories" :key="index">
        <div class="category">
          <h3>{{ category.title }}</h3>
          <div class="flights-row">
            <el-card
                v-for="(flight, i) in category.flights.slice(0, 5)"
                :key="i"
                shadow="hover"
                class="flight-card"
                @click="goToPlanOrder(flight)"
            >
              <img :src="getFlightImage(index, i)" class="flight-image" />
              <div class="flight-info">
                <h4>{{ flight.cfcity }} ⇌ {{ flight.ddcity }}</h4>
                <p>{{ formatFlightTime(flight.cftime) }} 去 {{ formatFlightTime(flight.ddtime) }} 回</p>
                <p>{{ flight.tdprice }} 起</p>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { listFlights } from '@/api/flight.js';

// 图片路径
const imagePaths = [
  require('@/assets/images/flight1.png'),
  require('@/assets/images/flight2.png'),
  require('@/assets/images/flight3.png'),
  require('@/assets/images/flight4.png'),
  require('@/assets/images/flight5.png'),
  require('@/assets/images/flight6.png'),
  require('@/assets/images/flight7.png'),
  require('@/assets/images/flight8.png'),
  require('@/assets/images/flight9.png'),
  require('@/assets/images/flight10.png'),
  require('@/assets/images/flight11.png'),
  require('@/assets/images/flight12.png'),
  require('@/assets/images/flight13.png'),
  require('@/assets/images/flight14.png'),
  require('@/assets/images/flight15.png')
];

const flights = ref([]);
const categories = ref([
  { title: '周末省心游', flights: [] },
  { title: '爱上大草原', flights: [] },
  { title: '海边浪一浪', flights: [] }
]);

const formatFlightTime = (time) => {
  const date = new Date(time);
  return `${date.getMonth() + 1}-${date.getDate()}`;
};

const getFlightImage = (categoryIndex, flightIndex) => {
  const imageIndex = categoryIndex * 5 + flightIndex;
  return imagePaths[imageIndex % imagePaths.length];
};

const router = useRouter();

const goToPlanOrder = (flight) => {
  router.push({
    name: 'PlanOrder',
    query: {
      cfcity: flight.cfcity,
      ddcity: flight.ddcity
    }
  });
};

onMounted(async () => {
  try {
    const response = await listFlights();
    if (response.code === 1) {
      flights.value = response.data;

      // Distribute flights into categories
      flights.value.forEach((flight, index) => {
        categories.value[index % 3].flights.push(flight);
      });
    }
  } catch (error) {
    console.error('Error fetching flight data:', error);
  }
});
</script>

<style scoped>
.flight-list {
  margin-top: 20px;
}

.category {
  margin-bottom: 20px;
}

.flights-row {
  display: flex;
  justify-content: space-between;
}

.flight-card {
  width: 18%;
  box-sizing: border-box;
}

.flight-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.flight-info {
  padding: 10px;
}

h3 {
  background-color: #eee;
  padding: 10px;
  text-align: center;
}
</style>
